<!--  -->
<template>
  <view class="layoutContent">
    <Header :type="headerType" class="layoutHeader"></Header>
    <scroll-view
      class="contentSrcoll"
      :scroll-y="true"
      style="width: 100%"
      :upper-threshold="200"
      :lower-threshold="100"
      refresherDefaultStyle="none"
      refresher-background="#FF4725"
      :refresher-enabled="true"
      :refresher-triggered="isRefresh"
      @scrolltoLower="handleScrollEnd"
      @refresherrefresh="handleStartMove"
      refresherThreshold="2s"
    >
      <view
        class="requestLoading"
        :style="{
          marginTop: isRefresh ? '100rpx' : '0rpx',
          animationDuration: '0.5s',
        }"
      >
        <image src="@/assets/images/loading.gif"></image>
        <text>{{ loadingText }}</text>
      </view>
      <view class="pageContent">
        <slot></slot>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onMounted } from 'vue'
import Header from '../customHeader/index.vue'
import { heaerType } from '../customHeader/consts'
import $ajax from '@/utils/request'
interface propsType {
  headerType?: heaerType
  api?: string
  enablePullDownRefresh: boolean
}
interface DataInterface {
  isRefresh: boolean
  loadingText: string
}
const state = reactive<DataInterface>({ isRefresh: false, loadingText: '下拉可以刷新' })
const props = withDefaults(defineProps<propsType>(), {
  headerType: 'default',
  enablePullDownRefresh: false,
})
const emit = defineEmits<{
  (e: 'getUpdateData', data: any): void
}>()
// onMounted(() => {
//   state.isRefresh = true
//   setTimeout(() => {
//     state.isRefresh = false
//   }, 1000)
// })
const handleStartMove = (e) => {
  if (!props.enablePullDownRefresh) return
  state.isRefresh = true
  state.loadingText = '正在刷新...'
  console.log(props.api, '---api')
  $ajax.post(props.api, {}).then((res) => {
    console.log(res, '-----res')
    emit('getUpdateData', { data: res.data })
    state.loadingText = '刷新完成'
    state.isRefresh = false
    setTimeout(() => {
      state.loadingText = '释放立即刷新'
    }, 500)
  })
  console.log(e, '----start1')
}
const handleScrollEnd = () => {
  console.log('滚动到底部')
}
const { headerType } = toRefs(props)
const { isRefresh, loadingText } = toRefs(state)
</script>
<style lang="scss">
page {
  height: 100%;
}
.layoutContent {
  display: flex;
  flex-direction: column;
  height: 100vh; /*高度必须指定 或者写成100%*/
  overflow: hidden;
  .layoutHeader {
    flex-shrink: 0;
  }
  .contentSrcoll {
    flex: 1;
    overflow: scroll; /*必须写这一条*/
    height: 1px;
  }
  .layoutFooter {
    height: 49px;
  }
}
.requestLoading {
  @include flexBox(column, center, center);
  // position: fixed;
  background: $main;
  width: 100%;
  padding-top: 20rpx;
  margin-top: -160rpx;
  box-sizing: border-box;
  transition: margin-top 0.25s linear;
  z-index: 100;
  image {
    width: 40rpx;
    height: 40rpx;
  }
  text {
    font-size: 30rpx;
    color: #fff;
    margin-top: 10rpx;
  }
}
</style>
